/*
 * @Author: lusx
 * @Date: 2019-02-18 13:41:35
 * @Last modified by:   lusx
 * @Last modified time: 03-04-2019 07:10:42
 */

import { inject, observer} from 'mobx-react';
import MonitorView from '../monitorView/index'
import StatisticsPages from '../statistics/statisticsPages';

//整体监控组件
@inject('countStore')
@observer
export default class Count extends React.Component {

  constructor(props) {
      super(props);
      this.state={
       selectedKey: 0
      }
  }
  componentDidMount(){
      this.setState({
        selectedKey: 0
      })
      const {countStore:{init},location:{query:{type}}} = this.props;
      const params = {
          '0':{'type':type},
          '1':{'type':type,"groupid": '0'},
          '2':{'type':type},
          '3':{'type':type}
      }
      init(params[type]);
  }
  componentWillReceiveProps(nextProps) {
      if(nextProps.location.key !== this.props.location.key){
          this.setState({
              selectedKey: 0
          })
          const {countStore:{init,searchParam},location:{query:{type}}} = nextProps;
          const params = {
              '0':{'type':type},
              '1':{'type':type,"groupid": '0'},
              '2':{'type':type},
              '3':{'type':type}
          }
          let newParams = {...params[type],...searchParam}
          init(newParams);
      }
  }

    render() {
      const {countStore:{loading,searchsBaseValue,tableStore,resetTable,searchByDate,data:{pies=[],count0,cardFootData,names=[],title='',config}},location:{query:{type}}} = this.props;
      const {selectedKey} = this.state;
      const RenderDomObj = {
        "0": MonitorView,
        "1": StatisticsPages,
        "2": StatisticsPages,
        "3": StatisticsPages
      };
      const RenderDom = RenderDomObj[type];
        return (
            <div className="g-count">
                 <RenderDom ecId={`${this && this.props && this.props.ecId || ''}_RenderDom@8f7m81`}
                  type={type}
                  loading = {loading}
                  pies={pies}
                  searchsBaseValue={searchsBaseValue}
                  doSearch={this.props.countStore.doSearch}
                  tableStore = {tableStore}
                  selectedKey = {selectedKey}
                  count0 = {count0}
                  config = {config}
                  cardFootData = {cardFootData}
                  names = {names}
                  title = {title}
                  switchTab={this.switchTab.bind(this)}
                  resetTable={resetTable}
                  searchByDate ={searchByDate}
                  />
            </div>
          )
    }
    //选中的tab事件方法
    switchTab(tabKey) {
        const {countStore,location:{query:{type}}} = this.props;
        this.setState({
          selectedKey:tabKey
        });
        countStore.init({
            "groupid": tabKey,
            "type":type
        });
    }
}
